/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, useTheme, Table, TableBody, TableRow, Cell, CCell, Button, Collapse, TableHead,
} from "customize-easy-ui-component";
import { DirectLink } from "../../../routing/Link";
import {ReportViewProps, ReportViewSubProps,} from "../../common/base";
import {
    分项末尾链接,
} from "../../common/rarelyVary";
import {multilines2Html} from "../../tools";
import {useMainRepUrlOr, useSplitSubCapacity, useSplitSubRepList} from "../../hook/useMainRepUrlOr";
import {config测量仪, config评定, } from "./orcBase";
import {useRepTableViewer} from "../../hook/useRepTableEditor";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";
import {useThreeColumnSubr} from "../../hook/useThreeColumnSubr";


/**@param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * 只要是公共的模板：那modelConfigs.ts就不能少了配置该模板代码。
 * */
export const ReportView: React.FunctionComponent<ReportViewProps> = (
    {repId,   source: parentOrc,  verId,rep, redId,fxIdx ,...other}
) => {
    const {urlMainRep}=useMainRepUrlOr(rep);
    const lsBlockMax=useSplitSubCapacity(parentOrc?._OPTIC_TS?.length,1);       //【模板敲定一次性最大几个分项显示出来】有些分项报告模板可能存在很多个分项 最多1个
    const {sumArea, areaIdAs, btnBindUses}=useSplitSubRepList(parentOrc?._OPTIC_TS ?? [], lsBlockMax,false);
    const { get:getRouteUrl } = useContext(RoutingContext);
    const routeLevels=getRouteUrl().entries.length;
    const routeTemplate=getRouteUrl().entries[routeLevels-1]?.routeData?.params?.template;
    return (
        <React.Fragment>
          <div  id="rp_optical_"  css={{"@media not print": {marginTop:'1rem', marginBottom: '1rem'},}}>
             <DirectLink  href={`/report/OPTIC_TS/ver/${verId}/${repId}/OPTIC_TS/_Controller`}>
                <div css={{"@media print":{display: 'none'} }}>
                    <Button>{(repId===rep?.id && rep?.modeltype!=='OPTIC_TS')? '内嵌式的':'独立流转的'}光谱检测报告分项控制器</Button>
                </div>
             </DirectLink>
            {(new Array(sumArea).fill(null)).map((s:any,ak:number) => {
                const [isDisplay, bindBtn]=btnBindUses[ak];      //不要加上 tabIndex={0} 超过折叠区域最大数量的？
                //可折叠区的：独立流转的报告，和内嵌分项的，实际还分开的。两者独自控制折叠的。内嵌分项rep.id相等，独立流转的却不等的ID;
                return <React.Fragment key={ak}>
                    <div key={ak} role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                        { <Text variant="h4">{`光谱检测折叠区${ak+1}，`}{isDisplay ? `收起`:`更多..`}</Text> }
                    </div>
                    <Collapse id={`${ak}`} show={isDisplay} noAnimated>
                        { areaIdAs[ak]?.map((surpId: any, m:number) => {
                            const dispIdx=(fxIdx??0) +(m+ ak*lsBlockMax);
                            return <OneSubRepView key={m} fxIdx={fxIdx} dispIdx={dispIdx} rep={rep} repId={repId}
                                                  verId={verId} parentOrc={parentOrc} surpId={surpId}/>
                        }) }
                        <div role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                            <Text variant="h4">{`光谱检测折叠区${ak+1}结束,收起`}</Text>
                        </div>
                    </Collapse>
                </React.Fragment>
            })}
          </div>
          {分项末尾链接({template:'OPTIC_TS', repId: repId||'',verId,urlMainRep,
                nestIn:'OPTIC_TS'!==routeTemplate, flowNest: repId!==rep?.id}) }
       </React.Fragment>
    );
}

/**为了用上useRepTableViewer，就只能从上级组件脱离分出来
 * @param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * */
const OneSubRepView: React.FunctionComponent<ReportViewSubProps> = (
    {fxIdx,dispIdx,rep,repId,verId,parentOrc,surpId}
) => {
    const theme= useTheme();
    const orc=parentOrc['_OPTIC_TS_'+surpId];
    const [_,renderRows]=useRepTableViewer(config评定, '评定表', orc,true,true);
    const [firstNode]=useThreeColumnSubr({orc, config:config测量仪,parentOrc,slash:true,
                        href:`/report/OPTIC_TS/ver/${verId}/${repId}/${surpId}/Instrument`});

    return <React.Fragment>
        <div css={{marginTop: '1rem', "@media print": {pageBreakInside: 'avoid',marginTop:'unset'} }}>
            <Text variant="h2" css={{textAlign:'center',}}>
              光谱检测报告{dispIdx? '-'+dispIdx : ''}
            </Text>
            <Text css={{textAlign:'center',display:'block',fontSize:'0.8rem'}}>FJB/JK-10523-0-2016</Text>
            <div css={{display: 'flex', justifyContent: 'space-between', flexDirection: 'row',}}>
                <Text>单位内编号：{orc?.单内编}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
            <Table fixed={ ["11%","29%","16%","10%","10%","%"] } css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
                <TableBody>
                    {firstNode}
                </TableBody>
            </Table>
        </div>
        <Table fixed={ ["12%","29%","12%","11%","11%","6%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
            <TableHead>
                <DirectLink  href={`/report/OPTIC_TS/ver/${verId}/${repId}/${surpId}/EvaluationForm`}>
                    <TableRow>
                        <CCell rowSpan={2}>序号</CCell><CCell rowSpan={2}>检测部位</CCell><CCell rowSpan={2}>试件规格</CCell>
                        <CCell colSpan={2}>设计材质</CCell>
                        <CCell rowSpan={2}>检查数量</CCell><CCell rowSpan={2}>分析结果</CCell>
                    </TableRow>
                    <TableRow><CCell>母材</CCell><CCell>焊材</CCell></TableRow>
                </DirectLink>
            </TableHead>
            <TableBody>
                <DirectLink  href={`/report/OPTIC_TS/ver/${verId}/${repId}/${surpId}/EvaluationForm#EvaluationForm`}>
                    {renderRows}
                </DirectLink>
            </TableBody>
        </Table>
        <Table fixed={ ["62%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
            <TableBody>
              <DirectLink  href={`/report/OPTIC_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                <TableRow>
                    <Cell colSpan={2} split={true}
                          css={{"@media print": {height: undefined}, padding: 0}}>
                        测点位置示意图：<br/>
                        {multilines2Html(orc?.示图说明, (txt, i) => {
                            return <React.Fragment key={i}>{(i !== 0) && <br/>}<Text>{txt}</Text></React.Fragment>
                        })}

                        { orc?._FILE_S部位?.map(({name,url} : any, i:number) => {
                            return <div key={i} css={{"@media print": {pageBreakInside: 'avoid' } }}>
                                     {i>0 && <hr/>}
                                     <div css={{display: 'flex',justifyContent: 'space-around',alignItems: 'center',}}>
                                        { url &&
                                            <img src={process.env.REACT_APP_OSS_ENDP+url} alt={url}
                                                 css={{
                                                     maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                                     maxWidth: '-webkit-fill-available',
                                                     [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                                     "@media print": {maxHeight: '86vh', maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                                 }}
                                            />
                                        }
                                    </div>
                             </div>
                        }) }
                    </Cell>
                </TableRow>
              </DirectLink>
            </TableBody>
        </Table>
        <Table fixed={ ["62%","%"]  }  css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
            <TableBody>
                <DirectLink  href={`/report/OPTIC_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                    <TableRow>
                        <Cell colSpan={2}><div css={{ minHeight: '2rem' }}>
                            <Text css={{fontSize:'0.8rem'}}>检测结果：</Text><br/>
                            {  multilines2Html(orc?.检测结果,  (txt,i)=>{
                                return <React.Fragment key={i}>{(i!==0)&&<br/>}<Text>{txt}</Text></React.Fragment>
                            } ) }</div></Cell>
                    </TableRow>
                </DirectLink>
                <TableRow>
                    <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
                        <div><Text>检验：</Text>    </div>
                        <div css={{textAlign: 'end'}}><Text >日期</Text>2022-12-31</div>
                    </div></CCell>
                    <CCell><div css={{height: '100%',display: 'flex',justifyContent: 'space-between',alignContent: 'space-between',alignItems: 'flex-start'}}>
                        <div><Text >审核：</Text>  </div>
                        <div css={{textAlign: 'end'}}><Text >日期</Text>2021-01-31</div>
                    </div></CCell>
                </TableRow>
            </TableBody>
        </Table>
    </React.Fragment>;
}

